<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Herder @publicNewTodo="publicNewTodo" />
      <Content :todoList="todoList" @singleChecked="singleChecked" @deleleSingle="deleleSingle" />
      <Footer @allChecked="allChecked" :todoList="todoList"
      @clearComplate="clearComplate" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'App'
})
</script>
<script lang="ts" setup>
import Content from './components/Content/index.vue'
import Footer from './components/Footer/index.vue'
import Herder from './components/Header/index.vue'
import { ref } from 'vue'
import { nanoid } from 'nanoid'
import type { todoItemType, todoListType } from './App'
//1.todo的数据
const todoList = ref<todoListType>([
  {
    id: nanoid(), thing: "吃", done: false
  },
  {
    id: nanoid(), thing: "喝", done: true
  },
  {
    id: nanoid(), thing: "嫖", done: false
  }
])
//2.接收一个content组件传递单个选中项的自定义函数事件
const singleChecked = (index: number) => {
  todoList.value[index].done = !todoList.value[index].done
}
//3.接收content组件传递单个删除的自定义事件函数
const deleleSingle = (index: number) => {
  todoList.value.splice(index, 1)
}
//4.接受Header组件传递的新值
const publicNewTodo = (newTodo: todoItemType) => {
  todoList.value.unshift(newTodo)
}
//5.接收footer组件全选的自定义事件回调函数
const allChecked = (checkType: boolean) => {
  todoList.value.forEach((item) => {
    item.done = checkType
  })
}
//6.footer组件删除所有已完成的数据的自定义事件回调函数
const clearComplate=()=>{
  todoList.value=todoList.value.filter((item)=>!item.done)
}
</script>

<style lang="scss" >
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>